<template>
	<view class="groupManage">
		<view class="groupMember flex flexWrap">
			<view class="groupOne" v-for="(item,index) in member" :key="index">
				<view class="imgBox">
					<image :src="item.createUserAvatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode="widthFix"></image>
					<uni-icons v-if="(item.userType!=0 && groupInfo.loginTeamUserVO.userType==0)" class="delIcon"
						type="minus-filled" size="20" @click="delMember(item)"></uni-icons>
					<view class="identity font10" v-if="item.userType!=2">{{item.userType==0?'组长':'管理员'}}</view>
				</view>
				<view class="font12 color666 hiddenOneline">{{item.createUserName}}</view>
			</view>
			<view class="groupOne" v-if="(groupInfo && groupInfo.loginTeamUserVO.userState==1)">
				<view class="addNew font18 color666" @click.stop="inviteClick">+</view>
			</view>
			<view class="groupOne">
				<view class="addNew font12 color666" @click="allMember">全部</view>
			</view>
		</view>
		<view class="info" v-if="(groupInfo && groupInfo.loginTeamUserVO.userType==0)">
			<uni-mdlist :listData="itemArr" @clickItem="clickItem" @clickImg="imageClick"></uni-mdlist>
		</view>
		<view class="groupOper" v-if="(groupInfo && groupInfo.loginTeamUserVO.userType==0)">
			<uni-mdlist :listData="itemArr2" @clickItem="clickItem" @clickSwitch="clickSwitch"></uni-mdlist>
		</view>
		<view class="groupMy" v-if="(groupInfo && groupInfo.loginTeamUserVO.userState==1)">
			<uni-mdlist :listData="itemArr3" @clickItem="clickItem" @clickSwitch="clickSwitch"></uni-mdlist>
		</view>
		<uni-login @closeLogin="closeLogin" :loginShow="isLoading"></uni-login>
		<!-- <view class="font16 del" v-if="(groupInfo && groupInfo.loginTeamUserVO.userState==1)">删除并退出</view> -->
	</view>
</template>

<script>
	import {
		groupMember,
		groupDetail,
		editGroupInfo,
		operMember,
		delMember
	} from "@/api/send.js"
	import {
		chooseImg,
		uploadFile,
		navigateLoginPage
	} from "@/utils/common.js"
	import uniLogin from '@/components/uni-login/uni-login.vue'
	export default {
		components: {
			uniLogin
		},
		data() {
			return {
				isLoading: false,
				member: [],
				itemArr: [{
						title: '小组头像',
						icon: '',
						subTitle: '',
						val: '',
						rightType: 'image'
					}, {
						title: '小组背景',
						icon: '',
						subTitle: '',
						val: '',
						rightType: 'image'
					}, {
						title: '名称',
						icon: '',
						subTitle: '',
						val: ''
					}, {
						title: '简介',
						icon: '',
						subTitle: '',
						val: ''
					}, {
						title: '二维码',
						icon: '',
						subTitle: '',
						val: ''
					}, {
						title: '所属圈子',
						icon: '',
						subTitle: '',
						val: ''
					}
					// ,{
					// 	title:'校友圈',
					// 	icon:'',
					// 	subTitle:'',
					// 	val:''
					// },{
					// 	title:'专业圈',
					// 	icon:'',
					// 	subTitle:'',
					// 	val:''
					// },
				],
				itemArr2: [{
						title: '允许出现本小组以外的动态',
						icon: '',
						subTitle: '',
						val: false,
						rightType: 'switch'
					}, {
						title: '收费模式',
						icon: '',
						subTitle: '',
						val: ''
					},
					// {
					// 	title:'转让小组',
					// 	icon:'',
					// 	subTitle:'',
					// 	val:''
					// },
					{
						title: '设置管理员',
						icon: '',
						subTitle: '',
						val: ''
					},
					// {
					// 	title:'解散本小组',
					// 	icon:'',
					// 	subTitle:'',
					// 	val:''
					// },
				],
				itemArr3: [{
					title: '我在组里的昵称',
					icon: '',
					subTitle: '',
					val: ''
				}, {
					title: '接收小组消息',
					icon: '',
					subTitle: '',
					val: true,
					rightType: 'switch'
				}],
				groupId: '',
				groupInfo: '',
				// 选择的修改的哪一类图片（头像、背景）
				chooseItem: ''
			};
		},
		onLoad(option) {
			this.groupId = option.id ? option.id : ''
			uni.removeStorageSync('cropUrl')
		},
		onShow() {
			this.getDetail()
			if (uni.getStorageSync('cropUrl')) {
				let path = [uni.getStorageSync('cropUrl')]
				uni.removeStorageSync('cropUrl')
				uploadFile(path).then((fileSucc) => {
					let param = {
						id: this.groupId
					}
					if (this.chooseItem.item.title.indexOf("头像") != -1) {
						param.logo = fileSucc.url
					} else if (this.chooseItem.item.title.indexOf("背景") != -1) {
						param.cover = fileSucc.url
					}
					this.editDetailApi(param, this.chooseItem, fileSucc.url)
				})
			}
		},
		onUnload() {
			uni.removeStorageSync('cropUrl')
		},
		methods: {
			closeLogin() {
				this.isLoading = false;
			},
			// 详情
			getDetail() {
				groupDetail({
					id: this.groupId
				}).then((res) => {
					if (res.code == 100000) {
						this.groupInfo = res.data
						this.getMembers()
						this.itemArr.forEach((item) => {
							let title = item.title
							if (title.indexOf('头像') != -1) {
								item.val = this.groupInfo.logo
								return
							} else if (title.indexOf('背景') != -1) {
								item.val = this.groupInfo.cover
								return
							} else if (title.indexOf('名称') != -1) {
								item.val = this.groupInfo.name
								return
							} else if (title.indexOf('简介') != -1) {
								item.val = this.groupInfo.introduction
								return
							} else if (title.indexOf('圈子') != -1) {
								item.val = this.groupInfo.objectNames.join(',')
								return
							}
						})
						this.itemArr2.forEach((item) => {
							let title = item.title
							if (title.indexOf('收费模式') != -1) {
								let mode = this.groupInfo.charge == 0 ? '免费无需审核' : (this.groupInfo.charge == 1 ? '免费需要审核' : '收费')
								if (this.groupInfo.charge == 2 && this.groupInfo.chargeCount > 0) {
									mode += this.groupInfo.amount + '-' + (this.groupInfo.chargeCount + '人团' + this.groupInfo
										.chargeDiscount + "折")
								}
								item.val = mode
								return
							} else if (title.indexOf('动态') != -1) {
								item.val = this.groupInfo.isAllowOtherDynamic
								return
							}
						})
						this.itemArr3.forEach((item) => {
							let title = item.title
							if (title.indexOf('昵称') != -1) {
								item.val = this.groupInfo.loginTeamUserVO.createUserName
								return
							} else if (title.indexOf('小组消息') != -1) {
								item.val = this.groupInfo.loginTeamUserVO.isReceiveMessage
								return
							}
						})
					}
				})
			},
			// 获取小组成员
			getMembers() {
				let param = {
					page: 1,
					size: 17,
					teamId: this.groupId,
					userState: 1
				}
				groupMember(param).then((res) => {
					if (res.code == 100000) {
						this.member = res.data.rows
					}
				})
			},
			// 邀请入组
			inviteClick() {
				if (!uni.getStorageSync('token')) {
					// #ifdef MP-WEIXIN
					this.isLoading = true;
					// #endif
					// #ifndef MP-WEIXIN
					navigateLoginPage()
					// #endif
					return
				}
				// inviteType 1提问者邀请；2最佳回答者邀请；3普通用户的提问邀请；4邀请加入小组；5任务打卡邀请
				let query = {
					id: this.groupInfo.id,
					inviteType: 4,
				}
				uni.navigateTo({
					url: '/pages/school/share/share?query=' + JSON.stringify(query)
				})
			},
			// 全部成员
			allMember() {
				let query = {
					id: this.groupId,
					type: 'see',
					preIdentity: this.groupInfo.loginTeamUserVO
				}
				uni.navigateTo({
					url: '/pages/send/group/allMember/allMember?query=' + JSON.stringify(query)
				})
			},
			// 删除成员
			delMember(item) {
				uni.showModal({
					title: '提示',
					content: '是否确定删除该组员？',
					success: (res) => {
						if (res.confirm) {
							let param = {
								teamId: this.groupInfo.id,
								createUserId: item.createUserId
							}
							delMember(param).then((res) => {
								if (res.code == 100000) {
									this.getMembers()
								}
							})
						} else if (res.cancel) {}
					}
				});
			},
			//每一项的点击事件
			clickItem(item) {
				let title = item.title
				if (title.indexOf('名称') != -1) {
					let query = {
						name: this.groupInfo.name,
						id: this.groupInfo.id,
						from: 'group'
					}
					uni.navigateTo({
						url: '/pages/send/group/editTitle/editTitle?query=' + JSON.stringify(query)
					})
					return
				} else if (title.indexOf('简介') != -1) {
					let query = {
						intro: this.groupInfo.introduction,
						id: this.groupInfo.id,
						from: 'group'
					}
					uni.navigateTo({
						url: '/pages/send/group/editIntro/editIntro?query=' + JSON.stringify(query)
					})
					return
				} else if (title.indexOf('圈子') != -1) {
					let chooseCircles = []
					if (this.groupInfo.objectIds) {
						this.groupInfo.objectIds.forEach((val) => {
							let newId = {
								objectId: val
							}
							chooseCircles.push(newId)
						})
					}
					if (this.groupInfo.objectNames) {
						this.groupInfo.objectNames.forEach((val, index) => {
							chooseCircles[index].circleName = val
						})
					}
					console.log('圈子', chooseCircles)
					uni.navigateTo({
						url: '/pages/school/circle/circle?circle=' + JSON.stringify(chooseCircles) + '&cancel=false&id=' + this
							.groupInfo.id
					})
					return
				} else if (title.indexOf('二维码') != -1) {
					this.inviteClick()
				} else if (title.indexOf('转让小组') != -1) {
					let query = {
						id: this.groupId,
						type: 'setCreater',
						preIdentity: this.groupInfo.loginTeamUserVO
					}
					uni.navigateTo({
						url: '/pages/send/group/allMember/allMember?query=' + JSON.stringify(query)
					})
					return
				} else if (title.indexOf('设置管理员') != -1) {
					let query = {
						id: this.groupId,
						type: 'setManage',
						preIdentity: this.groupInfo.loginTeamUserVO
					}
					uni.navigateTo({
						url: '/pages/send/group/allMember/allMember?query=' + JSON.stringify(query)
					})
					return
				} else if (title.indexOf('收费模式') != -1) {
					let query = {
						id: this.groupId,
						form: {
							amount: this.groupInfo.amount,
							charge: this.groupInfo.charge.toString(),
							chargeCount: this.groupInfo.chargeCount,
							chargeDiscount: this.groupInfo.chargeDiscount,
						},
						from: 'group'
					}
					console.log('收费模式', query)
					uni.navigateTo({
						url: '/pages/send/group/editChargeMode/editChargeMode?query=' + JSON.stringify(query)
					})
					return
				} else if (title.indexOf('组里的昵称') != -1) {
					let query = {
						nickname: this.groupInfo.loginTeamUserVO.createUserName,
						id: this.groupInfo.id,
						from: 'group'
					}
					uni.navigateTo({
						url: '/pages/send/group/editTitle/editTitle?query=' + JSON.stringify(query)
					})
					return
				}
			},
			// 更换图片操作（头像、背景）
			imageClick(obj) {
				this.chooseItem = obj
				chooseImg(1).then((res) => {
					if (obj.item.title.indexOf("头像") != -1) {
						uni.navigateTo({
							url:'/settingPages/pages/fullScreenCrop/fullScreenCrop?url=' + res[0]
						})
						return
					} else {
						uni.navigateTo({
							url:'/settingPages/pages/fullScreenCrop/fullScreenCrop?url=' + res[0] + '&ratio=4/3'
						})
						return
					}
				})
			},
			// switch开关的事件
			clickSwitch(obj) {
				console.log('开关', obj)
				if (obj.item.title.indexOf('动态') != -1) {
					let param = {
						id: this.groupId,
						isAllowOtherDynamic: obj.value
					}
					this.editDetailApi(param, obj)
					return
				} else if (obj.item.title.indexOf('小组消息') != -1) {
					let param = {
						teamId: this.groupInfo.id,
						isReceiveMessage: obj.value
					}
					operMember(param).then((res) => {
						if (res.code == 100000) {
							uni.showToast({
								icon: 'none',
								title: '修改成功'
							})
							this.itemArr3.forEach((item) => {
								if (item.title == obj.item.title) {
									item.val = obj.value
								}
							})
						} else {
							this.itemArr3.forEach((item) => {
								if (item.title == obj.item.title) {
									item.val = !obj.value
								}
							})
						}
					})
					return
				}
			},
			// 更改小组信息
			editDetailApi(param, obj, url) {
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				editGroupInfo(param).then((res) => {
					uni.hideLoading()
					if (res.code == 100000) {
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						})
						if (obj.item.rightType == 'image') {
							this.itemArr.forEach((item) => {
								if (item.title == obj.item.title) {
									item.value = url
								}
							})
							this.getDetail()
							return
						} else if (obj.item.rightType == 'switch') {
							this.itemArr2.forEach((item) => {
								if (item.title == obj.item.title) {
									item.val = obj.value
								}
							})
							this.getDetail()
							return
						}
					} else {
						if (obj.item.rightType == 'switch') {
							this.itemArr2.forEach((item) => {
								if (item.title == obj.item.title) {
									item.val = !obj.value
								}
							})
						}
						this.getDetail()
						return
					}
				}).catch((err) => {
					uni.hideLoading()
				})
			}
		}
	}
</script>
<style lang="scss">
	@import "@/static/public.scss";

	page {
		background: $pageBgColor;
	}
</style>
<style lang="scss" scoped>
	@import "@/static/public.scss";

	.groupMember,
	.info,
	.groupOper {
		background: #fff;
		margin-bottom: 20rpx;
	}

	.groupMember {
		padding: 30rpx 30rpx 0;
		box-sizing: border-box;
	}

	.groupOne {
		flex: 0 0 20%;
		text-align: center;
		margin: 0 0 40rpx;
		max-width: 150rpx;

		.imgBox {
			position: relative;
			width: 96rpx;
			height: 96rpx;
			margin: 0 auto 20rpx;

			.identity {
				position: absolute;
				bottom: 0;
				width: 100%;
				text-align: center;
				left: 0;
				background: rgba(0, 0, 0, .4);
				border-radius: 10rpx 10rpx 0 0;
				color: #fff;
			}
		}

		image {
			width: 96rpx;
			height: 96rpx;
			border-radius: 10rpx;
			display: block;
		}

		.delIcon {
			position: absolute;
			top: 0;
			right: 0;
			// color:$colorred !important;
		}
	}

	.addNew {
		border: 2px dashed $bordercolor;
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		margin: 0 auto;
		line-height: 100rpx;
		border-radius: 10rpx;
	}

	.del {
		background: $bordercolor;
		text-align: center;
		padding: 24rpx 0;
	}
</style>